<template>
  <div class="box">
    <div class="left">
      <div class="card_box">
        <div class="label">我参与的</div>
        <div class="three_card">
          <div class="card" v-for="index in 3" :key="index">
            <span class="title">8月战狼行动</span>
            <span class="content"
              >超级日租卡用户获取活动，1元1天800M循环叠加，全国流量不封顶！</span
            >
            <el-progress :percentage="50" color="#ffffff" />
          </div>
        </div>
      </div>
      <div class="chart_box">
        <div class="label">统计概览</div>
        <div ref="myChart" id="myChart" class="chart"></div>
      </div>
    </div>
    <div class="right">
      <div class="my_message">
        <span>我的消息</span>
        <span>更多>>></span>
      </div>
      <div class="waitDoneBox">
        <div class="my_wait">我的待办</div>
        <div class="msgCard" v-for="index in 3" :key="index">
          <span class="msg">地市约谈：广州电信分公司，关于省公司集约活动参与积极性问题约谈</span>
          <span class="time">2018-08-11 14：30：22</span>
        </div>
      </div>
      <demand1></demand1>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, ref } from 'vue'
import demand1 from './demand1/index.vue'
// 通过 internalInstance.appContext.config.globalProperties 获取全局属性或方法
let internalInstance = getCurrentInstance()
let echarts = internalInstance.appContext.config.globalProperties.$echarts
onMounted(() => {
  const dom = document.getElementById('myChart')
  const myChart = echarts.init(dom) // 初始化echarts实例
  myChart.setOption(option)
})
const option = {
  title: {
    text: '销售目标完成情况'
  },
  legend: {},
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    top: '24%',
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '目标销售额',
      type: 'bar',
      data: [105, 152, 200, 334, 390, 330, 220, 232, 124, 164, 345, 222]
    },
    {
      name: '当前销售额',
      type: 'bar',
      data: [10, 52, 100, 234, 310, 130, 20, 35, 64, 79, 22, 64]
    }
  ]
}
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: calc(100vh - 64px);
  background-color: aliceblue;
  padding: 40px;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 75%;
  height: 100%;
  .label {
    height: 30px;
    border-left: 5px solid #6481b2;
    padding-left: 20px;
    font-size: 18px;
    color: #6481b2;
    margin: 10px 0;
  }
  .card_box {
    display: flex;
    flex-direction: column;
    align-items: left;
  }

  .three_card {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .card {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: 30%;
      height: 200px;
      background-color: orange;
      padding: 30px;
      .title {
        color: #fff;
        font-size: 18px;
        font-weight: 400;
      }
      .content {
        color: #fff;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
  .chart {
    background-color: #fff;
    height: 510px;
  }
}
.right {
  width: 22%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .my_message {
    display: flex;
    justify-content: space-between;
    height: 50px;
    font-size: 18px;
    color: black;
    font-weight: 400;
    background-color: #fff;
    padding: 10px 30px 10px 30px;
    margin-bottom: 10px;
  }
  .waitDoneBox {
    height: 400px;
    margin-bottom: 40px;
    .my_wait {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      color: black;
      font-weight: 400;
      border-bottom: 2px solid #c5bfbf;
    }
    .msgCard {
      border-left: 3px solid rgb(238, 171, 47);
      margin-top: 5px;
      height: 110px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background-color: #fff;
      padding: 10px;
    }
  }
}
</style>
